<template>
  <div class="page-wrap">
    <el-card shadow="never">
      <div class="toolbar">
        <el-input v-model="input" placeholder="新增尺码，如：29/XL" class="w-300" />
        <el-button type="primary" @click="add">新增</el-button>
        <el-button @click="exportCsv">导出</el-button>
      </div>
      <el-table :data="list" border stripe>
        <el-table-column type="index" width="60" />
        <el-table-column label="尺码" prop="value" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button size="small" type="danger" @click="remove(row.value)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useDictStore } from '@/stores/dict.js'
const store = useDictStore()
onMounted(()=>{ store.initialize() })
const input = ref('')
const list = computed(()=> store.sizes.map(v=>({ value:v })))
function add(){ if(input.value){ store.addSize(input.value.trim()); input.value='' } }
function remove(v){ store.removeSize(v) }
function exportCsv(){
  const headers = ['尺码']
  const csv = [headers.join(','), ...store.sizes.map(v=>v)].join('\n')
  const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `尺码字典_${new Date().toISOString().slice(0,10)}.csv`
  link.click()
}
</script>

<style scoped>
.page-wrap { padding: 16px; }
.toolbar { display: flex; gap: 12px; margin-bottom: 12px; }
.w-300 { width: 300px; }
</style>


